<template>
  <div id="chartLineBox4" style="width: 100%; height: 300px"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    var chartDom4 = document.getElementById("chartLineBox4");
    var myChart4 = echarts.init(chartDom4);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
        backgroundColor: 'rgba(50,50,50,0.7)',
        //以23.5为分界
        formatter: function (v) {
          //  var text=v.name;
          console.log(v)
          let html = `<i class="el-icon-bell" style="color:red"></i>锅炉水位过低！<ul><li>建议检查进水管路的<br>19号阀门是否关闭</li></ul>`;
          if (v[0].data < 23.5) return html;
          else return v[0].data;
        },
      },
      toolbox: {
        show: false,
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          dataView: { readOnly: false },
          magicType: { type: ["line", "bar"] },
          restore: {},
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value}",
        },
      },
      series: [
        {
          name: "指标值",
          type: "line",
          data: [
            23.2,
            23.6,
            24,
            23.7,
            23.4,
            23.6,
            23.3,
            23.1,
            23.2,
            23.5,
            23.6,
            23.8,
            24,
            23.7,
            23.4,
            23.4,
            23.5,
            23.6,
            23.5,
            23.4,
            23,
            23.2,
            23.4,
            23.5,
            23.6,
            23.3,
            23.2,
            23.7,
            24,
            23.2,
            23.6,
          ],
        },
      ],
      color: "#5470c6",
    };
    option && myChart4.setOption(option);
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
</style>
